<template>
  <div class="day06">
    <h1>我是day06,我要通过路由显示！</h1>
    <p>明年：{{ $store.getters.nextAge }}</p>
    <button @click="change">长大了</button>
    <br />
    <input type="text" placeholder="我的期望涨薪幅度" v-model="num" />
    <button @click="incomeUp">涨工资</button>
    <p>当前工资：{{ $store.state.money }}元</p>
    <hr />
    <button @click="action">真的是异步</button>
    <h1 class="age">辅助函数的方式：{{ vuexAge }}</h1>
    <h1 class="age">普通方式：{{ $store.state.age }}</h1>
    <hr />
    <hr />
    <hr />
    <el-button type="success">危险按钮</el-button>
    <hr />
    <p>element中table</p>
    <el-table :data="tableData" stripe style="width: 70%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="sex" label="性别" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
      <el-table-column
      fixed="right"
      label="操作"
      width="180">
      <template>
        <el-button
          type="danger"
          size="mini">
          移除
        </el-button>
        <el-button size="mini" type="success">危险按钮</el-button>
      </template>
    </el-table-column>
    </el-table>
  </div>
</template>
<script>
// 引入辅助函数，作用是少写代码
import { mapState } from "vuex";
export default {
  data() {
    return {
      num: 0,
      tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          sex: '男'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
          sex: '男'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          sex: '男'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
          sex: '男'
        }]
    };
  },
  computed: {
    // 这里可以正常写普通的计算属性，不受影响
    // 将vuex中state映射到计算属性中
    ...mapState({
      vuexAge: (state) => state.age,
    }),
  },
  methods: {
    change() {
      // 通过commit调用grow这个mutation
      this.$store.commit("grow");
    },
    incomeUp() {
      // this.$store.commit('add', this.num * 1);
      // 对象风格的提交方式
      // this.$store.commit('add', {
      //   num: this.num * 1
      // });
      this.$store.commit({
        type: "add",
        num: this.num * 1,
      });
    },
    // 可以执行异步修改
    action() {
      this.axios("ssssss/sfdf/f");
      // .then(res => {
      //   // 到这里就是同步了,这样就可以绕开actions
      //   this.$store.commit('add', this.num * 1)
      // })
      this.$store.dispatch("asyncAdd", {
        num: 2000,
      });
    },
  },
};
</script>